之前在HTML5 Canvas属性和方法汇总一文中,介绍过Canvas的各种属性以及方法的说明,并列举了自己写的一些Canvas demo,接下来开始写一个简单的小游戏吧,有多简单,这么说吧,代码不到100行,先上效果图:

左侧为我们控制的控制板,右侧为假想的电脑控制的控制板
体验小游戏链接: https://demo.luckyw.cn/code.h...

初始化


首先在html页面中添加中添加一个canvas元素,并给出一个id用于在js代码中获取该元素并对其进行操作

<canvas id="canvas"></canvas>

然后就是对各种参数,注释中都有给出,我就不多说了,直接看

//获取canvas元素以及2d绘图环境c,以及设置canvas宽高为800x600
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
W = canvas.width = 800,
H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2, //球的位置、半径以及在X轴及Y轴的速度
panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2, //控制板的宽高以及初始位置
player1Score = 0, player2Score = 0, winnerScore = 3, //记录玩家的分数以及得了多少分算赢
isEnd = 0; //判断是否比赛结束的变量,0为未结束,1为已结束

封装工具方法


//绘制长方形(也就是控制板)
function fillRect(x, y, w, h, style) {
c.fillStyle = style;
c.fillRect(x, y, w, h);
}
//绘制圆(也就是游戏中的球)
function fillCircle(x, y, r, style) {
c.fillStyle = style;
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
c.fill();
}
//绘制文字(得分和显示输赢)
function fillText(txt, x, y, font, style) {
c.fillStyle = style || "white";
c.font = font || "40px DejaVu Sans Mono";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillText(txt, x, y);
}

添加事件


我们需要在canvas元素上添加监听事件,一是当结束的也就是isEnd为1的时候,当鼠标点击在canvas上的时候再来一把游戏,重置玩家分数以及重启动画绘制,二是我们需要控制左侧控制板的运动,不过只需要在Y轴运动即可

canvas.addEventListener("click", function () {
if (isEnd) {
player1Score = 0;
player2Score = 0;
isEnd = 0;
animate(); //主要的绘制方法
}
});
//获取鼠标在canvas上实际Y轴位置减去控制板的高度也就是控制板实际绘制的初始位置
canvas.addEventListener("mousemove", function (e) {
panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
});

边界判断


//球边界判断
if (ballX - ballR - panelW < 0) {
if (ballY > panel1Y && ballY < panel1Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
} else {
player2Score++;
ballReset();
}
}
if (ballX + ballR + panelW > W) {
if (ballY > panel2Y && ballY < panel2Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
} else {
player1Score++;
ballReset();
}
}
if (ballY + ballR < 0 || ballY - ballR > H) {
ballVy = -ballVy;
}
//用于控制右侧控制板的运动
if (panel2Y + panelH / 2 < ballY - 40) {
panel2Y = panel2Y + 5;
} else if (panel2Y + panelH / 2 > ballY + 40) {
panel2Y = panel2Y - 5;
}

执行动画


我这里直接在animate方法里使用requestAnimationFrame(animate),更兼容的方法应该是以下这样,为了偷个懒就没写兼容写法

var RAF = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
}
})();
RAF(animate);

到此,该小游戏的介绍到此结束,简单吧

canvas写个简单的小游戏的更多相关文章

  1. 用canvas写个接水管小游戏

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 过年的十八天假期迷迷糊糊一下子就过去了(LZ还是实习生,鉴于大学最后一个寒假了,所以就多请了好多天假),又要返工上班了.这是年后的第一篇博 ...

  2. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  3. 每个人都可以用C语言写的推箱子小游戏!今天你就可以写出属于自己项目~

    C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了.这个是我在大一学习 C语言 后写的推箱子小游戏,自己的逻辑能力得到了提升,在这里同大家分享这个推箱子小游 ...

  4. Scratch 简单的小游戏 --- 碰碰球

    Scratch 简单的小游戏 --- 碰碰球 ================================ 积木脚本块的简要分类: 1. 角色 2. 背景 3. 角色和背景组成的场景 4. 挡板角 ...

  5. java实现简单窗体小游戏----球球大作战

    java实现简单窗体小游戏----球球大作战需求分析1.分析小球的属性: ​ 坐标.大小.颜色.方向.速度 2.抽象类:Ball ​ 设计类:BallMain—创建窗体 ​ BallJPanel—画小 ...

  6. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  7. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  8. python写的battle ship小游戏 - 1.0

    最近学python,这是今天写的一个小游戏. from random import randint class Board(object): board = [] def __init__(self, ...

  9. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

随机推荐

  1. 【C#版本】微信公众号模板消息对接(二)(图文详解)

    本篇文章承接上一篇文章内容,点击此段文字传送至上一篇文章. 特此说明:本篇文章为个人原创文章,创作不易,未经作者本人同意.许可等条件,不得以任何形式搬运.转载.抄袭(等包括但不限于上述手段)本文章,否 ...

  2. 居然可以像玩游戏一样学Git

    工作中经常用到 git,但是用到的指令也都是比较初级的.简单的.当时学习的过程也是有点痛苦.各种概念理解起来要么靠想象,要么自己创建工程提交记录,然后执行指令,看具体效果.这样学下来是事倍功半. 在搜 ...

  3. C#10新特性-lambda 表达式和方法组的改进

    C# 10 中对Lambda的语法和类型进行了多项改进: 1. Lambda自然类型 Lambda 表达式现在有时具有"自然"类型. 这意味着编译器通常可以推断出 lambda 表 ...

  4. 【NLP】

  5. vue2.x结合echarts2实现显示具体省份热力图

    最近研究了一下VUE2.X结合ehcarts实现热力图,先看下最终: 效果话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g ...

  6. 从零开始,开发一个 Web Office 套件(11):支持中文输入法(or 其它使用输入法的语言)

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. 新建SpringBoot项目报错

    新建一个Springboot项目时,当勾选了SQL相关的依赖(如引入了jpa 或MyBatis依赖),直接启动项目时报错 原因:没有配置数据库相关的属性,如 url driver 等 解决办法:在ap ...

  8. web note

    web note html note 列表 ul 无序列表 ol 有序列表 并且可以通过 type 来定义列表序号的形式 <!DOCTYPE html> <html> < ...

  9. ActiveMQ-模块代码-02

    模块模式 p2p模式 生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...

  10. Java基础—private、this关键字及get/set方法

    Java基础-private\this关键字以及get\set方法 1.private关键字 private关键字通常用来修饰成员变量用来保护原有数据的安全,比如在下面学生类中 然后在测试类中调用成员 ...