Html连环跳跃网页,html <canvas/>+js实现马里奥走动，跳跃

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

直接贴代码：

//定义数组图片集合

var marios = new Array("1.png", "2.png", "3.png");

var mario = new Image();

var canvas = document.getElementById("mycanvas");

var ctx = canvas.getContext("2d");

var i = 0;

var num = 0;

var isRight = true;

function init() {

draw(10)

}

function reset() {

if (i === 3) {

i = 0;

}

if (num > 1000) {

num = 0;

}

if (num < 0) {

num = 1000;

}

}

function draw(number) {

mario.src = marios[i];

ctx.clearRect(0, 0, 1000, 500)

ctx.drawImage(mario, num, 420);

num += number;

i++;

reset();

}

function up() {

var h = 420

var ss = setInterval(function () {

h -= 5;

if (isRight) {

num += 2;

} else {

num -= 2;

}

reset();

mario.src = marios[i];

ctx.clearRect(0, 0, 1000, 500)

ctx.drawImage(mario, num, h);

if (h === 100) {

clearInterval(ss)

var dd = setInterval(function () {

h += 5;

console.log(isRight)

if (isRight) {

num += 2;

} else {

num -= 2;

}

reset();

mario.src = marios[i];

ctx.clearRect(0, 0, 1000, 500)

ctx.drawImage(mario, num, h);

if (h === 420) {

clearInterval(dd)

}

}, 10)

}

}, 10)

i++;

}

document.onkeydown = keyDown;

function keyDown() {

if (event.keyCode == 38) {

// 上

up()

}

if (event.keyCode == 40) {

// 下

}

if (event.keyCode == 37) {

// 左

draw(-10)

isRight = false

}

if (event.keyCode == 39) {

// 右

isRight = true

draw(10)

}

if (event.keyCode == 32) {

// 空格

}

}