游戏开发：js实现简单的板球游戏
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[i];// 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[i].item, breakers[i].x, breakers[i].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;
}
};
大家可以试试，具体的代码和资源见附件。
游戏开发：js实现简单的板球游戏相关推荐
- JS实现简单农场小游戏
JS实现简单农场小游戏 简介 效果展示 代码实现 在线预览 简介 最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
- python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
- Android studio游戏开发就是这么简单：卡牌杀系列(核心UI篇：SufaceView的核心用法)
Android studio游戏开发就是这么简单:卡牌杀系列(核心UI篇:SufaceView的核心用法) Android studio五年经验教你如何:花费了2周快速开发卡牌杀系类游戏,核心思路分享 ...
- Unity游戏开发——新发教你做游戏（一）：打开游戏开发新世界的大门
文章目录 一.前言 二.制作思路 三.提出问题 四.具体实现 一.前言 嗨,大家好,我是新发,如下,我做了个简单的Demo,接下来我会详细介绍如何一步步制作,Demo工程我已上传到GitHub,感兴趣 ...
- 2023游戏开发制作如何选择合适的游戏引擎？看完本文就知道
在游戏开发方面,为您的游戏选择合适的游戏引擎可以决定整个体验的成败.还有很多因素需要考虑: 你想制作什么样的游戏? 你的游戏是 2D 还是 3D? 你有多少经验? 引擎或框架的社区有多活跃? 引擎可以 ...
- Unity 2D游戏开发教程之使用脚本实现游戏逻辑
Unity 2D游戏开发教程之使用脚本实现游戏逻辑 使用脚本实现游戏逻辑 通过上一节的操作,我们不仅创建了精灵的动画,还设置了动画的过渡条件,最终使得精灵得以按照我们的意愿,进入我们所指定的动画状态. ...
- C#游戏开发快速入门2.2改变游戏对象的状态
C#游戏开发快速入门2.2改变游戏对象的状态 改变游戏对象的状态,就是要改变游戏对象的位置.朝向和大小.那么,为什么要改变游戏对象的状态呢?当然是因为游戏对象的状态不合适了.在具体说明之前,读者应该先 ...
- C#游戏开发快速入门 2.1 构建游戏场景
C#游戏开发快速入门 2.1 构建游戏场景 如果已经计划好了要编写什么样的游戏,在打开Unity以后,要做的第一件事情就是构建游戏场景(Scene).游戏场景就是玩家游戏时,在游戏视图中看到的一切, ...
- android手机游戏开发从入门到精通_unity3d游戏开发如何从入门到精通？
对于游戏爱好者来说,unity3d想必大家都不陌生,unity3d和虚幻4算是现在最主流的游戏开发引擎,当然,Unity 3D 游戏开发引擎目前之所以炙手可热,与其完善的技术以及丰富的个性化功能密不可 ...
最新文章
- 去掉excel保存文件时自动生成备份
- 关于40位MD5加密的破解
- EOS 智能合约源代码解读 （9）boot合约
- 贫困地区农品产销对接行动倡议书-中国农民丰收节交易会
- uefi和legacy的区别
- [CH Round #61] 取数游戏
- 摩托罗拉：未来一切以手机为中心
- 常见浏览器兼容性问题与解决方案？
- java e.getmessage() null,浅谈Java异常的Exception e中的egetMessage()和toString()方法的区别...
- 处理模型——找到对应一个方向的旋转角
- wps无法使用F4重复上一步操作的解决方法
- 面试题：spring的循环依赖问题以及如何解决
- Vue开发历程---音乐播放器的继续
- #bzoj1526#分梨子（乱搞）
- WebRTC 非常适用于智能家庭安防摄像头
- ubuntu加装固态硬盘设置
- ip地址的分类及地址范围
- windows10 基于Spin的模型检测
- 浅谈 FFT （终于懂一点了~~）
- 分形之列维(levy)曲线