0
キャンバス付きのページローダーを作成していて、es6クラスを使用しています...現時点では、正しく動作させることはできません。理由の1つは、キャンバスの進行。キャンバスから要素を削除せずに要素を消去する方法はありますか？
class Loader {
constructor (width, height) {
this.width = width
this.height = height
}
_init() {
this._createCanvas()
this._bindEvents()
}
// create canvas
_createCanvas() {
this.canvas = document.createElement("canvas")
document.body.appendChild(this.canvas)
this.canvas.id = "canvas"
this.canvas.width = loader.width
this.canvas.height = loader.height
}
_throttle (callback, delay) {
let last
let timer
return function() {
let context = this
let now = +new Date()
let args = arguments
if (last && now < last + delay) {
clearTimeout(timer)
timer = setTimeout(function() {
last = now
callback.apply(context, args)
}, delay)
} else {
last = now
callback.apply(context, args)
}
}
}
// resize canvas
_resizeCanvas() {
// resize canvas
var canvasRatio = this.canvas.height/this.canvas.width;
var windowRatio = window.innerHeight/window.innerWidth;
var width;
var height;
if (windowRatio < canvasRatio) {
height = window.innerHeight;
width = height/canvasRatio;
} else {
width = window.innerWidth;
height = width * canvasRatio;
}
this.canvas.width = width
this.canvas.height = height
}
_bindEvents() {
// create events listeners
this.resizeCanvas = this._throttle(function (event) {
this._resizeCanvas()
}.bind(this), 250)
window.addEventListener('resize', this.resizeCanvas, false)
}
_unbindEvents() {
// remove events listeners
window.removeEventListener('resize', this.resizeCanvas, false)
}
}
class Snake {
constructor(options = {}) {
this.options = {
x: options.x,
y: options.y,
height: options.height,
width: options.width,
isMoving: options.isMoving || false,
hasDispatched: options.hasDispatched || false,
nextSnakeCallback: options.nextSnakeCallback || null,
speed: options.speed || 4
}
}
_init() {
this._drawSnake()
}
start() {
this.options.isMoving = true;
}
reset() {
this.options.hasDispatched = false;
}
setNextSnakeCallback (callback) {
this.options.nextSnakeCallback = callback;
}
_drawSnake() {
this.canvas = document.getElementById("canvas")
this.ctx = this.canvas.getContext("2d")
this.ctx.beginPath()
this.ctx.rect(
this.options.x,
this.options.y,
this.options.width,
this.options.height)
this.ctx.fillStyle = "#f44242"
this.ctx.fill()
}
_clearSnake() {
this.ctx.clearRect(this.options.x, this.options.y, this.options.width, this.options.height);
}
}
class SnakeTop extends Snake {
constructor (options) {
super(options)
}
_init() {
super._drawSnake()
this._moveSnakeToRight()
super._clearSnake()
}
reset() {
this.options.x = this.options.height;
}
_moveSnakeToRight() {
if(this.options.isMoving){
this._clearSnake()
this._drawSnake()
if(this.options.x > loader.width - this.options.width && !this.options.hasDispatched){
this.options.hasDispatched = true;
if(this.options.nextSnakeCallback) {
this.setNextSnakeCallback()
}
} else if(this.options.x >= loader.width){
this.options.isMoving = false;
}
this.options.x += this.options.speed
}
window.requestAnimationFrame(this._moveSnakeToRight.bind(this));
}
}
class SnakeRight extends Snake {
constructor (options = {}) {
super(options)
}
_init() {
super._drawSnake()
this._moveSnakeDown()
super._clearSnake()
}
_moveSnakeDown() {
if(this.options.isMoving) {
this._clearSnake()
this._drawSnake()
if(this.options.y > loader.height - this.options.height && !this.options.hasDispatched){
this.options.hasDispatched = true;
if(this.options.nextSnakeCallback) {
this.setNextSnakeCallback()
}
} else if (this.options.y > loader.height) {
this.options.isMoving = false
}
this.options.y += this.options.speed
}
window.requestAnimationFrame(this._moveSnakeDown.bind(this));
}
}
class SnakeBottom extends Snake {
constructor (options = {}) {
super(options)
}
_init() {
super._drawSnake()
this._moveSnakeToLeft()
super._clearSnake()
}
_moveSnakeToLeft() {
if (this.options.isMoving) {
this._clearSnake()
this._drawSnake()
if(this.options.x < 0 && !this.options.hasDispatched){
this.options.hasDispatched = true
if(this.options.nextSnakeCallback) {
this.setNextSnakeCallback()
}
} else if (this.options.x < this.options.width) {
this.options.isMoving = false
}
this.options.x -= this.options.speed
}
window.requestAnimationFrame(this._moveSnakeToLeft.bind(this));
}
}
class SnakeLeft extends Snake {
constructor(options = {}) {
super(options)
}
_init() {
super._drawSnake()
this._moveSnakeUp()
super._clearSnake()
}
_moveSnakeUp() {
if(this.options.isMoving) {
this._clearSnake()
this._drawSnake()
if(this.options.y < 0 && !this.options.hasDispatched) {
this.options.hasDispatched = true
if(this.options.nextSnakeCallback) {
this.setNextSnakeCallback()
}
} else if (this.options.y > - this.canvas.height) {
this.options.isMoving = false
}
this.options.y -= this.options.speed
}
window.requestAnimationFrame(this._moveSnakeUp.bind(this));
}
}
// defining the elements on the DOM
let loader = new Loader (600, 600)
loader._init()
//CREATE SNAKES
let snakeT = new SnakeTop ({
x: - 300,
y: 0,
height: 20,
width: 300
})
snakeT._init()
//ASSIGN NEXT SNAKE callback
snakeT.setNextSnakeCallback (()=>{
snakeR.reset();
snakeR.start();
});
//START FIRST SNAKE
snakeT.start();
ので、他の3つの要素を構築する上：
これは、これまでのところ、私のコードです。あなたがjsfiddleから見ることができるように
は、私の機能drawSnakeは（）私の研究中に
https://jsfiddle.net/ombqfzjq/
他の私は矩形をクリアすることを発見した後に四角形をdrawning、代わりの
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.clearRect(square.x,square.y,square.w,square.h);
を使用することができます
ch単一の矩形... 私のクラスSnakeでは、_clearSnake（）関数を構築し、それを必要に応じてサブクラスに呼び出しました。
私のロジックに何が間違っていますか？コードを改善するにはどうすればよいですか？
ありがとうございます。 –