Recently I read some examples of canvas games and wrote an example by reference.
The principle is roughly described as follows: it mainly uses the request animation frame to refresh canvas continuously to realize the animation, monitor some events and realize the operation.
The process is to prepare the container, prepare the relevant roles, bind the events, update the data, initialize the canvas, and call the main process function (here, call the requestAnimationFrame circularly).
In short, it means setting data, updating canvas, updating data, and updating canvas.
Online example: http://www.lightconmos.com/plane/index.html code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>plane</title>
</head>
<body>
<div class="bg">
<canvas id="bgd" width="400" height="600"></canvas>
</div>
</body>
<script>
// Create container
var con = document.getElementById("bgd")
var ctx = con.getContext("2d")
// Create background
var bg = {
src: "img/bg.png",
x: 0,
y: 0,
speed: 0,
status: false
}
var bgImgo = new Image()
bgImgo.src = bg.src
bgImgo.onload = function () {
bg.status = true
}
var bgImgt = new Image()
bgImgt.src = bg.src
bgImgt.onload = function () {
bg.status = true
}
// Create a protagonist
var plane = {
src: "img/p1.png",
x: 0,
y: 0,
status: false,
type: 1,
ammoType: 1,
speed: 256,
}
var planeImg = new Image()
planeImg.src = plane.src
planeImg.onload = function () {
plane.status = true
}
// ammunition
var ammo = {
src: "",
x: 0,
y: 0,
speed: 512,
status: false
}
var ammos = []
var shooting = function (val) {
ctx.fillStyle = "red"
ctx.beginPath()
ctx.arc(val.x,val.y,4,0,2*Math.PI)
ctx.fill()
}
// Create monster
var enemyImg = new Image()
var enemys = []
var enemy = {
x: Math.random() * 368,
y: 0,
speed: 150,
status: false,
src: 'img/en.png',
width: 30,
height: 30
}
enemyImg.src = enemy.src
enemyImg.onload = function () {
enemy.status = true
}
// Count the number of planes shot down
var num = 0
// Total number of enemy aircraft
var sum = 1
// Add event
var keysDown = {}
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true
console.log(keysDown)
console.log(e.keyCode)
}, false)
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode]
}, false)
// Initialization interface
var init = function () {
plane.x = con.width / 2
plane.y = con.height * 9 / 10
}
// update operation
var update = function (speed) {
console.log(speed)
if (38 in keysDown) {
if (plane.y > 0) {
plane.y -= plane.speed * speed
}
}
if (40 in keysDown) {
if (plane.y - 548 < 0) {
plane.y += plane.speed * speed
}
}
if (37 in keysDown) {
if (plane.x > 0) {
plane.x -= plane.speed * speed
}
}
if (39 in keysDown) {
if (plane.x - 370 < 0) {
plane.x += plane.speed * speed
}
}
if (32 in keysDown) {
var temp = {
x: plane.x + 15,
y: plane.y,
status: true,
speed: 300
}
ammos.push(temp)
delete keysDown[32]
}
// Background stitching
if (bg.y - 1000 == 0) {
bg.y = 0
} else {
bg.y++
}
// Movement of ammunition
ammos.forEach(function (item, index) {
if (item.y + 1000 < 0) {
ammos.splice(index,1)
} else {
item.y -= item.speed * speed
// Hit enemy aircraft
if ((item.y > enemy.y && item.y < enemy.y + 32) && (item.x > enemy.x && item.x < enemy.x + 32)) {
ammos.splice(index,1)
enemy.y = 0
enemy.x = Math.random() * 368
num++
sum++
}
}
})
// Enemy aircraft movement
if (enemy.y > 570) {
enemy.y = 0
enemy.x = Math.random() * 368
sum++
} else {
enemy.y += enemy.speed * speed
}
}
// Reload interface, updating data
var render = function () {
// Draw a background picture
if (bg.status) {
ctx.drawImage(bgImgo, bg.x, bg.y)
ctx.drawImage(bgImgt, bg.x, bg.y - 1000)
}
// Painting airplanes
if (plane.status) {
ctx.drawImage(planeImg, plane.x, plane.y)
}
// Enemy airplane
if (enemy.status) {
ctx.drawImage(enemyImg, enemy.x, enemy.y)
}
// ammunition
ammos.forEach(function (item) {
shooting(item)
})
// Fraction
ctx.fillStyle = "rgb(250, 250, 250)"
ctx.font = "24px Helvetica"
ctx.textAlign = "left"
ctx.textBaseline = "top"
ctx.fillText( "Number of planes shot down: " + num, 32, 32)
ctx.fillText("Total number of enemy aircraft: " + sum, 32, 64)
}
// main program
var main = function () {
var now = Date.now()
var delta = now -then
update(delta / 1000)
render()
then = now
requestAnimationFrame(main)
}
var w = window
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame
var then = Date.now()
init()
main()
</script>
<style>
.bg{
width: 400px;
height: 600px;
margin:0 auto;
border:1px solid #666;
}
</style>
</html>
See http://www.cnblogs.com/you/p/how-to-make-a-simple-html5-canvas-game.html