html5 游戏开发
2021-06-10 13:02
标签：black img rom fps port client creat screen obj 近来想做html5游戏开发些小东西玩一下，因为手边就是笔记本，想怎么玩就怎么玩了，今年可以说是非常重要特殊的一年，感觉有些倒霉，不过，心态最重要，该怎么做的时候就去怎么做吧，日子的24小时是不会变的，不管能活多久。 游戏开发感觉不错，所以就刚看了一个碰撞检测canvas的来做，一段段代码弄下来试，成功运行了，原理也是一些很简单的，不过是 不停地检测 FPS,不停刷新每一帧来达到最终的探测目的； 每一帧里面都去检测范围，是否会碰撞； 有三种检测方法： 范围检测； 光线投影速度向量检测；分离轴定理； 检测方法还是有些不懂，目前来看并不是特别特殊，这些东西应该可以很快上手，毕竟这些都是基本的东西； 附上今天测试的一段oop的js 声波探测脚本： html5 游戏开发 标签：black img rom fps port client creat screen obj 原文地址：http://www.cnblogs.com/hualiu0/p/7296065.html
html>
body>
div class="collide">
canvas id="canvas">
p>Your browser does not support the canvas element!p>
canvas>
collision test
div>
script>
Array.prototype.remove = function (obj) {
for (var i = 0; i this.length; i++) {
if (this[i] === obj) {
this.splice(i, 1);
break;
}
}
}
function BasicObject(x, y, order) {
this.x = x;
this.y = y;
this.order = isNaN(order) ? 0 : order;
this.addTo = function (objects) {
objects.push(this);
objects.sort(function (a, b) { return a.order - b.order; });
}
this.removeFrom = function (objects) {
objects.remove(this);
}
}
function Wave(x, y, r) {
BasicObject.call(this, x, y);
this.radius = isNaN(r) ? 1 : r;
this.color = 255;
this.draw = function (context) {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.strokeStyle = "rgb(" + this.color + ", " + this.color + ", " + this.color + ")";
context.stroke();
}
this.update = function (objects) {
this.color -= 20;
this.radius += 10;
if (this.color 0) {
this.removeFrom(objects);
}
}
this.collide = function (objects) {
var isCollided = 0;
for (i in objects) {
if (objects[i] instanceof Stone) {
var d = Math.sqrt(Math.pow(this.x - objects[i].x, 2) + Math.pow(this.y - objects[i].y, 2));
if (d this.radius + objects[i].radius && d > Math.abs(this.radius - objects[i].radius)) {
objects[i].isShocked = true;
isCollided++;
}
}
}
if (isCollided) {
this.removeFrom(objects);
}
}
}
Wave.prototype = new BasicObject();
function Stone(x, y, r) {
BasicObject.call(this, x, y);
this.radius = r;
this.isShocked = false;
this.draw = function (context) {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fillStyle = "black";
context.fill();
}
this.update = function (objects) {
if (this.isShocked) {
var wave = new Wave(this.x, this.y, this.radius);
wave.addTo(objects);
this.isShocked = false;
}
}
}
Stone.prototype = new BasicObject();
function Engin() {
var canvas = document.getElementById("canvas");
canvas.width = screen.width - 30;
canvas.height = screen.height - 100;
var context = canvas.getContext("2d");
var buffer = document.createElement("canvas");
buffer.width = canvas.width;
buffer.height = canvas.height;
var bufferCtx = buffer.getContext("2d");
var objs = new Array();
const FPS = 20;
document.onmousedown = function (event) {
var wave = new Wave(event.clientX, event.clientY);
wave.addTo(objs);
}
this.manage = function () {
bufferCtx.fillRect(0, 0, buffer.width, buffer.height);
context.fillRect(0, 0, canvas.width, canvas.height);
for (x in objs) {
if (objs[x].update) {
objs[x].update(objs);
}
}
for (x in objs) {
if (objs[x].draw) {
objs[x].draw(bufferCtx);
}
}
for (x in objs) {
if (objs[x].collide) {
objs[x].collide(objs);
}
}
context.drawImage(buffer, 0, 0);
}
this.run = function () {
var s1 = new Stone(100, 100, 50);
var s2 = new Stone(canvas.width / 2, canvas.height / 2, 100);
s1.addTo(objs);
s2.addTo(objs);
setInterval(this.manage, 1000 / FPS);
}
}
window.onload = function () {
new Engin().run();
}
//collision detection
//1. boundary detection
//2. ray cast
//3. seperating axis
script>
body>
html>
上一篇：JS实现extend函数
下一篇：WebForm数据绑定