喵星软件园提供热门手机游戏下载,最新手机游戏攻略!

CanvasRun好玩吗 CanvasRun玩法简介,canvas做游戏怎么样

时间:2023-10-05 07:49:43 来源: 浏览:

js实现简单的板球游戏

大家好,本次我们来使用js来实现一个简单的板球游戏。截图如下:

首先,设计页面代码,页面代码很简单,因为整个几乎是使用js编写的,页面几乎没有代码,如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

body{

margin: 0px;

}

</style>

<script src="js/common.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

</body>

</html>

接下来就是主要的js代码common.js,如下:

// 画布的宽高

var canvasWidth;

var canvasHeight;

// 方块的背景图片

var bg;

// 球

var ball;

// 板

var board;

// 背景方块的宽度

var breakWidth;

// 球的坐标和速度

var ballX = 100;

var ballY;

var xVal = 5;

var yVal = -5;

// 板的坐标

var boardX = 0;

var boardY;

// 方块数组

var breakers = <>;

// 板的原始长度

var boardWidth = 242;

// 计时变量

var time = 0;

// 记录是否改变状态

var breakerChanged = false;

var col = 10;

window.onload = function(){

// 创建并设置canvas

var canvas = document.createElement("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

canvasWidth = canvas.width;

canvasHeight = canvas.height;

breakWidth = (canvasWidth-10) / col;

// 将画布添加到body中

document.body.appendChild(canvas);

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

// 球的初始Y值

ballY = canvasHeight - 80;

// 板的初始Y值

boardY = canvasHeight - 20;

// 加载所有的图片

loadAllImage();

// 定义键盘响应事件

document.onkeydown = boardMove;

// 开始启动程序

setInterval(run, 20);

function run(){

// 清空画布

context.clearRect(0,0,canvasWidth, canvasHeight);

// 绘制背景、小球、板

context.drawImage(bg, 0, -50, canvasWidth, canvasHeight + 50);

context.drawImage(ball, ballX, ballY);

context.drawImage(board, boardX, boardY, board.width, board.height);

// 如果处于变长的过程中

if(breakerChanged){

// 继续计时

time++;

// 当时间达到5秒钟

if(time >= 250){

// 还原

breakerChanged = false;

time = 0;

board.width = boardWidth;

}

}

// 绘制方块

updateBreakers();

// 更新小球的位置

updateBall();

// 球与方块的碰撞

ballHitBreakers();

// 球与板的碰撞

ballHitBoard();

}

function boardMove(){

// 向左移动

if(event.keyCode == 37){

boardX -= 30;

if(boardX <= 0){

boardX = 0;

}

}

// 向右移动

else if(event.keyCode == 39){

boardX += 30;

if(boardX >= canvasWidth - board.width){

boardX = canvasWidth - board.width;

}

}

}

// 简单判断球和板的碰撞

function ballHitBoard(){

if(hit(boardX, boardY - 60, board.width, board.height, ballX, ballY)){

yVal = -yVal;

}

}

// 简单判断球和方块的碰撞

function ballHitBreakers(){

// 从后面开始循环

for (var i = breakers.length - 1; i >= 0; i--) {

var breaker = breakers;// 3个属性,item, x, y

// 如果碰撞

if(hit(breaker.x, breaker.y, breakWidth, 30, ballX, ballY)){

// 变长的状态

if(breaker.state == 1){

// 判断是否已经处于变长状态

if(breakerChanged){

// 如果已经变长,应该刷新时间

board.width = boardWidth * 1.5;

time = 0;

}else{

// 如果开始变长,就改变状态

board.width = boardWidth * 1.5;

breakerChanged = true;

}

}else if(breaker.state == 2){

// 判断是否已经处于变长状态

if(breakerChanged){

// 如果已经变长,应该刷新时间

board.width = boardWidth * 0.5;

time = 0;

}else{

// 如果开始变长,就改变状态

board.width = boardWidth * 0.5;

breakerChanged = true;

}

}

// 方块消失(数组删除一个元素)

breakers.splice(i, 1);

// 球返回

yVal = -yVal;

}

}

}

// 简单碰撞函数

function hit(bx, by, bw, bh, x, y){

if(x >= bx && x <= bx + bw && y >= by && y <= by + bh){

return true;

}else{

return false;

}

}

// 球的运动

function updateBall(){

ballX += xVal;

ballY += yVal;

// 靠近左边的边距

if(ballX <= 0){

xVal = -xVal;

}

// 靠近顶部的边距

if(ballY <= 30){

yVal = -yVal;

}

// 测试代码,让球永远不掉落

// if(ballY >= canvasHeight - 80){

// yVal = -yVal;

// }

// 靠近右边的边距

if(ballX >= canvasWidth - 60){

xVal = -xVal;

}

}

// 加载所有的方块

function createBreakers(){

// 循环行

for (var i = 0; i < col; i++) {

// 循环列

for (var j = 0; j < col; j++) {

// 得到一个4~9的随机数

var num = Math.floor(Math.random() * 6) + 4;

// 创建一个图片

var item = loadImage("img/ball/" + num + ".png");

var x = breakWidth * j + j * 2;

var y = 30 * i + 30;

// 键值对(key-value)

// {"item":item, "x":x, "y":y}

// 如果是绿色的方块,让板变长

if(num == 9){

breakers.push({"item":item, "x":x, "y":y, "state":1});

}

else if(num == 4){

breakers.push({"item":item, "x":x, "y":y, "state":2});

}

else{

breakers.push({"item":item, "x":x, "y":y, "state":0});

}

}

}

}

// 绘制所有的方块

function updateBreakers(){

for (var i = 0; i < breakers.length; i++) {

context.drawImage(breakers.item, breakers.x, breakers.y, breakWidth, 30);

}

}

function loadAllImage(){

bg = loadImage("img/ball/bg.png");

ball = loadImage("img/ball/ball.png");

board = loadImage("img/ball/board.png");

// 创建方块

createBreakers();

}

// 加载单张图片

function loadImage(url){

var img = new Image();

img.src = url;

return img;

}

};

大家可以试试,想要了解更多,可以关注“重庆千锋”公众号,获取更多的额视频学习资料,大家也可以申请千锋重庆两周免费试听课程。

标题:CanvasRun好玩吗 CanvasRun玩法简介,canvas做游戏怎么样
链接:https://www.miaoshengapp.cn/yxgl/123064.html
版权:文章转载自网络,如有侵权,请联系删除!
资讯推荐
p5r荷鲁斯(p5r荷鲁斯怎么合成)
p5r荷鲁斯(p5r荷鲁斯怎么合成)

今天给各位分享p5r荷鲁斯的攻略,其中也会对p

2023-08-21
《天命奇御2》装备强化图文教程分享,天命装备用什么强化
《天命奇御2》装备强化图文教程分享,天命装备用什么强化

《天命奇御2》刀法怎么搭配?暴击刀法使用技

2023-10-04
《鬼谷八荒》昊天眼妖兽树妖摘叶飞花技能介绍,
《鬼谷八荒》昊天眼妖兽树妖摘叶飞花技能介绍,

《斗罗大陆》真人版上线,观众出现了极端式一

2023-10-05
最强蜗牛贵重品升级顺序是什么 贵重品镶嵌优先级介绍
最强蜗牛贵重品升级顺序是什么 贵重品镶嵌优先级介绍

最强蜗牛贵重品升级顺序是什么?这款游戏独特

2020-06-15
光遇12.12每日任务怎么完成 光遇12.12每日任务攻略
光遇12.12每日任务怎么完成 光遇12.12每日任务攻略

光遇12.12每日任务怎么完成?光遇作为一款非

2022-12-27
列王的纷争凤尾帽属性分析
列王的纷争凤尾帽属性分析

在列王的纷争中凤尾帽算是一个比较特殊的装

2022-12-22