A 10 year old stop-motion animation artist teamed up with me to create a mini-game to pract...

栏目: IT技术 · 发布时间: 4年前

内容简介:A 10 year old stop-motion animation artist teamed up with me to create this mini-game to practice single digit multiplication or addition.Answer the five questions to help the pipe-cleaner guy in his quest for treasure!We are hoping to create more episodes

A 10 year old stop-motion animation artist teamed up with me to create this mini-game to practice single digit multiplication or addition.

Answer the five questions to help the pipe-cleaner guy in his quest for treasure!

We are hoping to create more episodes in future and would love to hear your feedback:send us an email.

You can play on top of this screen or check out the full screen version:

Addition orMultiplication

The program is very simple. One interesting thing about it is that it alternates between two HTML video elements - while one is being displayed, the other one is hidden and being loaded.

The video files are very small (about 200kB each), but they still could cause annoying buffering issues (delays) without this mechanism.

There is an HTML5 Canvas on top of the videos that is used to display questions, answers and messages.

The entire code is below. Here's a quick overview:

[1-15] HTML setup. The page consists of two video controls and a Canvas. They're all located in the upper left corner of the screen. The Canvas is on top of the videos.

[17-37] Declare variables.

[39-46] This function clears the Canvas when the countdown counter reaches the value of 1. This is used to clear the correct answer after a delay.

[48-62] Randomize a new question plus three incorrect answers, calculate the correct answer using the mathematical operator (+/*).

[64-77] Display the question in a comic speech bubble (67) and the four boxes with answers on the Canvas.

[79-104] When the current video finishes playing:

- switch out the videos (hide the current one and display the buffer)

- load the next video file in the buffer video(85-86)

- the current video becomes the buffer, and vice versa (88-94)

- randomize and display a new question (95-97)

- If all videos completed, display the victory message (98-103)

[106-125] Resize the videos and the Canvas to full screen. This is mainly needed if the player rotates their mobile device (horizontal/vertical). I could not use the native fullscreen capability as in some cases there is no way to get rid of the video controls.

[127-137] Reset all variables when a new game starts and show the red 'play' button (135).

[139-142] Start the first game.

[144-175] When the player clicks:

[146-150] if it's the beginning of the game, play the first video.

[151-152] if there is a question of the screen, get the Y coordinate of the click and:

[153-160] if the correct answer was clicked, play the next video and the 'correct' bleep. Clear the question and the boxes, redraw the correct answer in white. Start the countdown to clearing the correct answer (159).

[161-165] otherwise play the 'incorrect' bleep and redraw the incorrect answer in red.

[168-174] if this was the last video, restart the game.

[177-179] set up event listeners.

[180] kick off the timer mechanism.

-->

Check out these programming tutorials:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python神经网络编程

Python神经网络编程

[英]塔里克·拉希德(Tariq Rashid) / 林赐 / 人民邮电出版社 / 2018-4 / 69.00元

神经网络是一种模拟人脑的神经网络,以期能够实现类人工智能的机器学习 技术。 本书揭示神经网络背后的概念,并介绍如何通过Python实现神经网络。全书 分为3章和两个附录。第1章介绍了神经网络中所用到的数学思想。第2章介绍使 用Python实现神经网络,识别手写数字,并测试神经网络的性能。第3章带领读 者进一步了解简单的神经网络,观察已受训练的神经网络内部,尝试进一步改......一起来看看 《Python神经网络编程》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具